<template>
    <view class="box">
        <input placeholder="请输入充值金额" :value="cost" type="digit" placeholder-style="color:#FE725C" />
        <view class="remark">备注信息：</view>
        <view class="img">
            <image src="/static/images/kjfp.png" mode="" />
            订单&发票
        </view>
        <button>充值缴费</button>
    </view>
</template>

<script>
const app = getApp();
const $http = app.globalData.$http;
var config = require('../../utils/config.js');
export default {
    data() {
        return {
            picUrl: config.Config,
            cost: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {}
};
</script>
<style>
.box {
    width: 700rpx;
    margin: 100rpx auto 0 auto;
}

.box input {
    border: 2rpx solid #ff6e00;
    height: 80rpx;
    width: 100%;
    border-radius: 16rpx;
    padding: 0 10rpx;
    font-size: 32rpx;
    box-sizing: border-box;
}

.box button {
    height: 90rpx;
    line-height: 90rpx;
    background-color: #fe725c;
    color: #fff;
    font-size: 32rpx;
    position: absolute;
    bottom: 300rpx;
    width: 700rpx;
    box-sizing: border-box;
}

.img {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #231815;
    position: absolute;
    width: 700rpx;
    bottom: 500rpx;
}

.img image {
    width: 49rpx;
    height: 46rpx;
    margin-right: 10rpx;
}

.remark {
    font-size: 24rpx;
    margin-top: 20rpx;
    font-weight: 300;
}
</style>
